<template>
  <a-table
    :columns="columns"
    :row-key="record => record.login.uuid"
    :data-source="data"
    :loading="loading"
    :pagination="false"
  >
    <template slot="name" slot-scope="name"> {{ name.first }} {{ name.last }} </template>
  </a-table>
</template>
<script>
import reqwest from 'reqwest';
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    sorter: true,
    width: '20%',
    scopedSlots: { customRender: 'name' },
  },
  {
    title: 'Gender',
    dataIndex: 'gender',
    filters: [
      { text: 'Male', value: 'male' },
      { text: 'Female', value: 'female' },
    ],
    width: '20%',
  },
  {
    title: 'Email',
    dataIndex: 'email',
  },
];

export default {
  data() {
    return {
      data: [],
      loading: false,
      columns,
    };
  },
  mounted() {
    this.fetch();
  },
  methods: {    
    fetch(params = {}) {
      console.log('params:', params);
      this.loading = true;
      reqwest({
        url: 'https://randomuser.me/api',
        method: 'get',
        data: {
          results: 4,
          ...params,
        },
        type: 'json',
      }).then(data => {
       
        this.loading = false;
        this.data = data.results;
      });
    },
  },
};
</script>
<style scoped>
.ant-table-row{
  background-color:aliceblue;
}
</style>
